<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Account and data deletion</title>
    <script src="plugins/vue/dist/vue.min.js"></script>
    <!--导入vue和axios-->
    <script src="plugins/axios/dist/axios.js"></script>
    <script src="js/common.js"></script>
    <script src="js/element/element.js"></script>
    <script src="js/jsencrypt.js"></script>
    <link rel="stylesheet" href="js/element/element.css">
    <style>
        body {
            font-family: 'Arial', sans-serif;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            margin: 0;
            background: linear-gradient(135deg, #71b7e6, #9b59b6);
            color: #444;
        }

        .container {
            max-width: 600px;
            margin: 20px;
            padding: 40px;
            background-color: #ffffff;
            border-radius: 10px;
            box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
            text-align: center;
        }

        h1 {
            font-size: 28px;
            margin-bottom: 20px;
            color: #333;
        }

        p {
            font-size: 16px;
            line-height: 1.6;
            margin: 10px 0;
        }

        ol {
            text-align: left;
            margin: 20px 0;
        }

        li {
            margin-bottom: 10px;
            list-style: none;
        }

        input[type="text"],
        input[type="password"] {
            width: 100%;
            padding: 10px;
            margin: 10px 0;
            border: 1px solid #ccc;
            border-radius: 5px;
        }

        button {
            background-color: #007bff;
            color: #ffffff;
            border: none;
            border-radius: 5px;
            padding: 10px 20px;
            cursor: pointer;
            transition: background-color 0.3s;
            display: block;
            margin: 20px auto;
        }

        button:hover {
            background-color: #0056b3;
        }
    </style>
</head>
<body>
<div class="container" id="app">
    <el-select v-model="user.language" :placeholder="messages.language" @change="changeLanguage">
        <el-option label="Chinese" value="zh"></el-option>
        <el-option label="English" value="en"></el-option>
    </el-select>
    <h1>{{ messages.title }}</h1>
    <p>{{ messages.intro }}</p>
    <ol>
        <li><p>1. {{ messages.step1 }}</p><br>
            <ul>
                <li>{{ messages.iAm }}:
                    <ul>
                        <li>
                            <el-radio v-model="user.userType" label="1"> {{ messages.myself }}</el-radio>
                        </li>
                        <li>
                            <el-radio v-model="user.userType" label="2"> {{ messages.onBehalf }}</el-radio>
                        </li>
                    </ul>
                </li>
            </ul>
        </li>
        <br>
        <li>
            <p>2. {{ messages.step2 }}</p><br>
            <el-form ref="form" :model="user" status-icon label-width="150px" :rules="addFormRules">
                <el-form-item :label="messages.emailAddress" prop="email">
                    <el-input type="email" v-model="user.email" :placeholder="messages.emailPlaceholder"></el-input>
                </el-form-item>
            </el-form>
            <button @click="submitForm" type="submit">{{ messages.submit }}</button>
            <ul>
                <li>{{ messages.info1 }}</li>
                <li>{{ messages.info2 }}</li>
                <li>{{ messages.processingInfo1 }}</li>
                <li>{{ messages.processingInfo2 }}</li>
            </ul>
        </li>
    </ol>
    <p>{{ messages.privacy }}</p>
    <p>E-mail: nyssacasseyraza@gmail.com</p>
</div>

<script type="text/javascript">
    var checkEmail = (rule, value, cb) => {
        //验证邮箱的正则表达式
        const regEmail = /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(\.[a-zA-Z0-9_-])+/;
        if (regEmail.test(value)) {
            //合法的邮箱
            return cb();
        }
        //邮箱不合法
        cb(new Error('Please enter a valid email!'));
    }
    new Vue({
        el: "#app",
        data: {
            user: {
                email: null,
                language: "en",
                userType: null,
                code: null,
                token: null,
                action: null,
            },
            userType: null,
            addFormRules: {
                email: [
                    {required: true, message: 'Please enter your email address', trigger: 'blur'},
                    {validator: checkEmail, trigger: 'blur'}
                ],
            },
            messages: {},
            translations: {
                zh: {
                    title: '删除您的账号和数据',
                    intro: '欢迎来到 WordMaster - A WordWizard 的账号和数据删除页面。如果您希望删除您的账号和相关数据，请按照以下步骤操作：',
                    step1: '填写表单',
                    step2: '验证您的邮箱地址',
                    iAm: '我是',
                    myself: '我自己',
                    onBehalf: '代表其他人',
                    emailAddress: '邮箱地址：',
                    emailPlaceholder: '请输入电子邮箱',
                    processing: '处理您的请求',
                    processingInfo1: '我们会在收到您的请求后的 7 天内处理。',
                    processingInfo2: '如果我们能够找到与您相关的信息，我们将删除它。',
                    submit: '提交请求',
                    info1: '我们将向您的邮箱发送一封验证邮件，以确保我们处理正确的请求。',
                    info2: '请在验证邮件中点击链接，以继续进行下一步。',
                    privacy: '我们重视您的隐私，如果您需要更多帮助或其他建议，请随时告知！😊',
                    error1: '表单校验未通过',
                    error2: '请选择类型',
                    tip: "请选择语言",
                    error3: '请输入邮箱',
                    error5: '邮箱发送失败~请稍后再试~',
                    error6: '网络异常！请稍后再试~',
                    success: '邮件发送成功！请注意查收~',
                    language: '请选择语言'
                },
                en: {
                    title: 'Delete Your Account and Data',
                    intro: 'Welcome to the WordMaster - A WordWizard account and data deletion page. If you wish to delete your account and related data, please follow the steps below:',
                    step1: 'Fill out the form',
                    step2: 'Verify your email address',
                    iAm: 'I am',
                    myself: 'Myself',
                    onBehalf: 'On behalf of someone else',
                    emailAddress: 'Email Address:',
                    emailPlaceholder: 'Please enter your email',
                    processing: 'Processing Your Request',
                    processingInfo1: 'We will process your request within 7 days of receipt.',
                    processingInfo2: 'If we can find information related to you, we will delete it.',
                    submit: 'Submit Request',
                    info1: 'We will send a verification email to your inbox to ensure we handle the correct request.',
                    info2: 'Please click the link in the verification email to proceed to the next step.',
                    privacy: 'We value your privacy. If you need more help or other suggestions, please let us know! 😊',
                    error1: 'Form verification failed',
                    error2: 'Please select the type',
                    error3: 'Please enter your email address',
                    tip: "Please select language",
                    error5: 'Email sending failed~Please try again later~',
                    error6: 'Network abnormality! Please try again later~',
                    success: 'Email sent successfully! Please check carefully~',
                    language: 'Please select language'
                }
            }
        },
        methods: {
            changeLanguage(value) {
                this.user.language = value;
                this.messages = this.translations[value];
            },
            submitForm() {
                this.$refs.form.validate((valid) => {
                    if (valid) {
                        this.sendVerificationCode();
                    } else {
                        this.$message.error(this.messages.error1);
                        return false;
                    }
                });
            },
            sendVerificationCode: function () {
                const loading = this.$loading({
                    lock: true,
                    text: 'Loading',
                    spinner: 'el-icon-loading',
                    background: 'rgba(0, 0, 0, 0.7)'
                });

                if (this.user.userType == null) {
                    this.$message.error(this.messages.error2)
                    setTimeout(() => {
                        loading.close();
                    }, 1000);
                    return
                }
                if (this.user.email == null) {
                    this.$message.error(this.messages.error3)
                    setTimeout(() => {
                        loading.close();
                    }, 1000);
                    return
                }
                let s = RsA_encryption(this.user);
                this.$http.post("/delete_account", s).then(res => {
                    let {code, message, result} = res.data;
                    if (code == "200") {
                        this.$message.success(this.messages.success);
                    } else {
                        this.$message.error(this.messages.error5)
                    }
                    setTimeout(() => {
                        loading.close();
                    }, 2000);
                }).catch(res => {
                    this.$message.error(this.messages.error6)
                    setTimeout(() => {
                        loading.close();
                    }, 2000);
                })
            },
        },
        mounted() {
            this.changeLanguage(this.user.language)
        },
    })
</script>
</body>
</html>
